<template>
  <el-card class="category">
    <div slot="header" class="category-header">
      <span>销售额类别占比</span>
      <el-radio-group v-model="channel" size="small" @change="changeChannel">
        <el-radio-button label="全部渠道"></el-radio-button>
        <el-radio-button label="线上"></el-radio-button>
        <el-radio-button label="门店"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="charts" ref="charts"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
import { mapState } from 'vuex'
export default {
  name: 'Category',
  data() {
    return {
      channel: '全部渠道'
    }
  },
  mounted() {
    this.myEcharts = echarts.init(this.$refs.charts)
    this.myEcharts.setOption({
      title: {
        text: '搜索引擎',
        subtext: '1048',
        textStyle: {
          fontSize: 14,
          fontWeight: 'normal'
        },
        subtextStyle: {
          fontSize: 30,
          color: '#000',
          fontWeight: 700
        },
        left: 'center',
        top: '40%',
        padding: 10
      },
      series: {
        type: 'pie',
        radius: ['40%', '70%'],
        label: {
          formatter: '{b}:{c}',
          position: 'outside'
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        },
        height: 400,
        data: [
          { value: 300, name: '视频广告' },
          { value: 1048, name: '搜索引擎' },
          { value: 580, name: '邮件营销' },
          { value: 484, name: '联盟广告' },
          { value: 735, name: '直接访问' }
        ]
      }
    })
    this.myEcharts.on('mouseover', params => {
      const { value: subtext, name: text } = params.data
      this.myEcharts.setOption({
        title: {
          subtext,
          text
        }
      })
    })
  },
  computed: {
    ...mapState({
      // rankOnline: state => state.home.homeData.saleRank.online,
      // rankShop: state => state.home.homeData.saleRank.shop
      rankOnline: state => {
        const {
          name: nameList,
          value: valueList
        } = state.home.homeData.saleRank.online
        const data = nameList.reduce((p, v, i) => {
          p.push({ name: v, value: valueList[i] })
          return p
        }, [])
        return data
      },
      rankShop: state => {
        const {
          name: nameList,
          value: valueList
        } = state.home.homeData.saleRank.shop
        const data = nameList.reduce((p, v, i) => {
          p.push({ name: v, value: valueList[i] })
          return p
        }, [])
        return data
      }
    })
  },
  methods: {
    changeChannel(channel) {
      switch (channel) {
        case '全部渠道':
          this.myEcharts.setOption({
            title: {
              text: '搜索引擎',
              subtext: '1048'
            },
            series: {
              data: [
                { value: 300, name: '视频广告' },
                { value: 1048, name: '搜索引擎' },
                { value: 580, name: '邮件营销' },
                { value: 484, name: '联盟广告' },
                { value: 735, name: '直接访问' }
              ]
            }
          })
          break
        case '线上':
          this.changeChartData(this.rankOnline)
          break
        case '门店':
          this.changeChartData(this.rankShop)
          break
        default:
          break
      }
    },
    changeChartData(data) {
      const { name: text, value: subtext } = data[0]
      this.myEcharts.setOption({
        title: {
          text,
          subtext
        },
        series: {
          data: data
        }
      })
    }
  },
  mixins: [resize]
}
</script>

<style lang="sass" scoped>
.category-header
  display: flex
  justify-content: space-between
  align-items: center

.charts
  height: 400px
</style>
